<template>
  <a-modal
    :class="[modalClass, simpleClass]"
    :visible="visible"
    :bodyStyle="{padding:0}"
    :footer="null"
    @ok="handleOk"
    @cancel="handleCancel"
    v-bind="$props">
    <div class="ant-modal-body" :style="bodyStyle">
      <slot/>
    </div>
    <div class="ant-modal-footer">
      <slot name="footer">
        <a-button @click="handleCancel">关闭</a-button>
        <a-button type="primary" @click="handleOk">保存</a-button>
      </slot>
    </div>
  </a-modal>
</template>

<script>
  import props from './props.js'
  export default {
    name: 'DragModal',
    mixins: [props],
    props: {
      // 容器的类名
      modalClass: {
        type: String,
        default: () => {
          return 'modal-box'
        }
      },
      visible: {
        type: Boolean,
        default: () => {
          return false
        }
      },
      title: {
        type: String,
        default: () => {
          return undefined
        }
      },
      width: {
        type: Number,
        default: () => {
          return '50%'
        }
      }
    },
    data () {
      return {
        simpleClass: undefined
      }
    },
    watch: {
      visible () {
        this.$nextTick(() => {
          this.initialEvent(this.visible)
        })
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.initialEvent(this.visible)
      })
    },
    methods: {
      handleOk (e) {
        this.$emit('ok', e)
      },
      handleCancel (e) {
        this.$emit('cancel', e)
      },
      getStyle (dom, attr) {
        return getComputedStyle(dom)[attr]
      },
      initialEvent (visible) {
        
        if (visible) {
          this.simpleClass = Math.random().toString(36).substring(2)

          // console.log('--------- 初始化')
          // console.log('document===>', document)
          // console.log('simpleClass===>', this.simpleClass)

          setTimeout(() => {
         
           var header = null
           var contain = null
           var realContain = null
           var modalContent = null
           
            contain = document.getElementsByClassName(this.simpleClass)[0]
            realContain = contain.getElementsByClassName('ant-modal')[0]
            header = contain.getElementsByClassName('ant-modal-header')[0]
            modalContent = contain.getElementsByClassName('ant-modal-content')[0]

            // console.log('初始化-header:', header)
            // console.log('初始化-contain:', contain)
            // console.log('初始化realContain:', realContain)
            // console.log('初始化-modalContent:', modalContent)

            header.style.cursor = 'all-scroll'

            header.onmousedown = (e) => {

              document.body.onselectstart = () => false
              
              const disX = e.clientX
              const disY = e.clientY
              const screenWidth = document.body.offsetWidth // body当前宽度
              const screenHeight = document.body.clientHeight // 可见区域高度(应为body高度，可某些环境下无法获取)
        
              const dragDomWidth = realContain.offsetWidth // 对话框宽度
              const dragDomHeight = realContain.offsetHeight // 对话框高度
        
              const minDragDomLeft = realContain.offsetLeft
              const maxDragDomLeft = screenWidth - realContain.offsetLeft - dragDomWidth
              const minDragDomTop = realContain.offsetTop
              const maxDragDomTop = screenHeight - realContain.offsetTop - dragDomHeight
              
              // 获取到的值带px 正则匹配替换
              const domLeft = this.getStyle(realContain, 'left')
              const domTop = this.getStyle(realContain, 'top')
              let styL = +domLeft
              let styT = +domTop
        
              // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
              if (domLeft.includes('%')) {
                styL = +document.body.clientWidth * (+domLeft.replace(/%/g, '') / 100);
                styT = +document.body.clientHeight * (+domTop.replace(/%/g, '') / 100);
              } else {
                styL = +domLeft.replace(/px/g, '');
                styT = +domTop.replace(/px/g, '');
              }

              document.onmousemove = (e) => {
                // 通过事件委托计算移动的距离
                let left = e.clientX - disX
                let top = e.clientY - disY
                
                if (e.preventDefault) {
                  e.preventDefault()
                }
                else {
                  // 解决快速频繁拖动滞后问题
                  e.returnValue = false
                }

                // 边界处理
                if (-left >= minDragDomLeft) {
                  left = -minDragDomLeft
                }
                if (left >= maxDragDomLeft) {
                  left = maxDragDomLeft
                }
        
                if (-top >= minDragDomTop) {
                  top = -minDragDomTop
                }
                if (top >= maxDragDomTop) {
                  top = maxDragDomTop
                }

                // 移动当前元素
                realContain.style.cssText += `left:${left + styL}px;top:${top + styT}px;`
              }
              
              document.onmouseup = () => {
                document.body.onselectstart = () => true
                document.onmousemove = null
                document.onmouseup = null
              }
            }
          }, 0)
        }
      }
    }
  }
</script>
<style>
</style>